import React, { useEffect, useState } from 'react'
import styles from './index.module.less'
import { Form, Input } from 'antd-mobile'
import CareerIntroduce from '../CareerIntroduce'
import bubble from '@/resource/careerEdit/bubble.png'
import { observer } from 'mobx-react'
import store from '../../store'
import { toJS } from 'mobx'

const FillOccupation = () => {
    const { fillInList } = store || {}
    const [value, setValue] = useState(false)
    const [form] = Form.useForm()
    const [nameList, setNameList] = useState([
        {
            name: '',
            feature: '',
        },
        {
            name: '',
            feature: '',
        },
        {
            name: '',
            feature: '',
        },
        {
            name: '',
            feature: '',
        },
        {
            name: '',
            feature: '',
        },
    ])
    useEffect(() => {
        if (fillInList.length > 0) {
            setNameList(toJS(fillInList))
            const newArr = [...toJS(fillInList)]
            const formFields = newArr.reduce((pre: any, item, index) => {
                pre[`text_${index}`] = item.name
                return pre
            }, {})
            form.setFieldsValue(formFields)
        }
    }, [fillInList])
    //点击下一步
    const nextStep = () => {
        form.validateFields().then(() => {
            setValue(true)
        })
    }
    //输入框变化出发事件
    const inputChange = (v: string, i: number) => {
        let arr = [...nameList]
        arr[i].name = v
        setNameList([...arr])
    }
    //表单底部节点
    const footerNode = () => {
        return (
            <div className={styles.footer} onClick={nextStep}>
                <span>下一步</span>
            </div>
        )
    }

    return (
        <div className={styles.container}>
            <div className={value ? styles.next_page : styles.page}>
                <div className={styles.top_view}>
                    <img src={bubble} />
                    <span className={value ? styles.flex_block : ''}>{value ? '请写出喜欢这些职业的特征或原因' : '请思考五个你未来可能从事的职业或你曾经幻想过的职业'}</span>
                </div>
                {value ? (
                    <CareerIntroduce data={nameList} changeNameList={setNameList} />
                ) : (
                    <div className={styles.middle_view}>
                        <Form footer={footerNode()} form={form}>
                            {nameList.map((item, index) => {
                                return (
                                    <Form.Item name={`text_${index}`} key={`text_${index}`} rules={[{ required: true, message: '请填写完整信息' }]}>
                                        <Input placeholder="请输入职业名称" onChange={v => inputChange(v, index)} maxLength={10} />
                                    </Form.Item>
                                )
                            })}
                        </Form>
                    </div>
                )}
            </div>
        </div>
    )
}

export default observer(FillOccupation)
